<template>
	<view class="map_box">
		<!-- #ifdef H5-->
		<view
			class="map_box"
			id="PublicMap">
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<map
			class="H5_map"
			:style="{height: mapHeight + 'px'}"
			:latitude="latitude"
			:longitude="longitude"
			:markers="covers"
			:polygons="polygon"
			scale="14"
			@tap="changeMarker">
			<cover-view
				class="uni-report"
				@click="saveCurrentAddress">
				<text class="uni-report-text">点击提交位置信息</text>
			</cover-view>
		</map>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import { isPtInPoly } from '@/common/geoCal.js'
	export default {
		data() {
			return {
				GDMap: null,
				marker: null,
				//H5
				longitude: '',
				latitude: '',
				covers: [],

				//曲江面数据
				QJPolygonData: null,
				polygon: {
					points: [],
					strokeColor: 'pink',
					strokeWidth: 3,
					fillColor: 'rgba(0, 122, 255, 0.3)'
				},
				addressName: '',
				currentXy: {
					gdx: '',
					gdy: '',
				},
				max_distance: 300,
				mtype: null,
				mapHeight: 0,
				currentLocation: {}
			}
		},
		onLoad(options){
			uni.getSystemInfo({
				success: (res) => {
					this.mapHeight = res.windowHeight;
				}
			})

			// #ifdef H5
			this.$nextTick(()=>{
				this.initMap();
			})
			// #endif

			// #ifdef APP-PLUS
			this.$nextTick(() => {
				//定位
				this.geoLocation();//在定位的时候把案件位置一起push进去
			})
			// #endif
		},
		methods: {
			//点击地图
			changeMarker(e){
				this.currentLocation = {};
				let _this = this;
				this.covers.forEach((ele) => {
					console.log(ele)
					if(ele.id == 1){
						ele.latitude = e.detail.latitude;
						ele.longitude = e.detail.longitude;
						_this.currentXy.gdx = e.detail.longitude;
						_this.currentXy.gdy = e.detail.latitude;
					}
					var point = new plus.maps.Point(e.detail.longitude, e.detail.latitude);
					plus.maps.Map.reverseGeocode(
						point,
						{},
						function(event) {
							if(event != null || event != ''){
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型

								if(address == ''){
									uni.showToast({
									  title: '未获取到该位置的地址！',
									  icon: 'none'
									});

								}else{
									_this.currentLocation = {
										currentx: e.detail.longitude,
										currenty: e.detail.latitude,
										currentAddress: address,
									}

									// var point = e.detail;
									// var isPointInRing=false;
									// for(var i=0;i< _this.QJPolygonData[0].length;i++){
									// 	//isPointInRing = AMap.GeometryUtil.isPointInRing(point,_this.QJPolygonData[0][i]);
									// 	if(isPointInRing == true){
									// 		break;
									// 	}
									// }

									// if(isPointInRing == false){
									// 	if(_this.mtype == 2){
									// 		var p1 = {
									// 			"lng": e.detail.longitude,
									// 			"lat": e.detail.latitude,
									// 		};

									// 		var p2 = [_this.gdx, _this.gdy];
									// 		var distance = Math.round(p1.distance(p2));
									// 	}

									// }else{
									// 	uni.showToast({
									// 	  title: '请移动至曲江区边界内进行定位！',
									// 	  icon: 'none'
									// 	});
									// }
								}
							}else{
								uni.showToast({
								  title: '未获取到地址信息请重试！',
								  icon: 'none'
								});

							}
						},
						function(e) {}
					);
				});

				this.covers = [...this.covers];//更新数据，把自己赋值给自己
				this.$forceUpdate();//强制重新渲染页面
			},
			//关闭当前页面，当前位置已经存储到storage中
			saveCurrentAddress() {
				if(Object.keys(this.currentLocation).length == 0){
					return;
				}

				let location = this.currentLocation;
				let longitude = location.currentx;
				let latitude = location.currenty;
				let isContain = isPtInPoly(longitude, latitude, this.QJPolygonData[0]);

				if(isContain){
					uni.setStorageSync('currentLocation', {
						currentx: location.currentx,
						currenty: location.currenty,
						currentAddress: location.currentAddress
					});


					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.showToast({
					  title: '请移动至曲江区边界内进行定位！',
					  icon: 'none'
					});
				}
			},
			//初始化地图
			initMap() {
				this.GDMap = new AMap.Map('PublicMap', {
					zoom: 14,
					viewMode: '2D',
					center: [108.99569,34.20124],
					// center: [this.currentXy.gdx, this.currentXy.gdy],
					resizeEnable: true,
				});
				//定位
				let _this = this;
				this.GDMap.plugin('AMap.Geolocation', function() {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, // 是否使用高精度定位，默认：true
						convert: true,
						showMarker: true,
						panToLocation: true,
					});
					_this.GDMap.addControl(geolocation);
					geolocation.getCurrentPosition();
					AMap.event.addListener(geolocation, 'complete', onComplete)
					AMap.event.addListener(geolocation, 'error', onError)

					function onComplete(data) {
						// data是具体的定位信息
						_this.GDMap.setCenter(data.position); // 执行定位
						//把当前处置人员的位置存到storage

						_this.currentLocation = {
							currentx: data.position.lng,
							currenty: data.position.lat,
							currentAddress: data.formattedAddress
						}
					}
					function onError(data) {
						// 定位出错
					}
				})
				//获取曲江边界
				this.getQjBjMapData();
			},
			//定位
			geoLocation() {
				let _this = this;

				uni.showLoading({
					title: '正在获取定位'
				});
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude

						//点位重新更新

						let currentLocation = uni.getStorageSync('currentLocation');

						//如果有值的时候、没值的时候

						if(Object.keys(currentLocation).length > 0){
							_this.currentXy.gdx = currentLocation.currentx;
							_this.currentXy.gdy = currentLocation.currenty;
						} else {
							_this.currentXy.gdx = res.longitude;
							_this.currentXy.gdy = res.latitude;
						}


						// #ifdef APP-PLUS
						_this.addressName = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum + res.address.poiName;
						// #endif
						_this.covers = [];
						_this.covers = [{
							id: 1,
							latitude: _this.currentXy.gdy,
							longitude: _this.currentXy.gdx,
							iconPath: '../../static/city-manage/uni-address.png'
						}];
						//把当前处置人员的位置存到storage
						_this.currentLocation = {
							currentx: _this.currentXy.gdx,
							currenty: _this.currentXy.gdy,
							currentAddress: _this.addressName
						}

						uni.hideLoading()
					}
				});
			},
			//画出曲江边界
			initQJPolygon() {
				let Polygon = new AMap.Polygon({
					map: this.GDMap,
					path: this.QJPolygonData,
					strokeColor: 'pink',
					strokeOpacity: 0.8,
					strokeWeight: 3,
					strokeStyle: "dashed",
					fillColor: '#007aff',
					fillOpacity: 0.4,
					zIndex: 999
				});
				this.GDMap.setFitView(Polygon); // 执行定位
			},
		}
	}
</script>

<style>
	.map_box{
		position: relative;
		width:750rpx;
		overflow:hidden;
		z-index: 1;
		background: #fff;
	}
	.map_legend{
		/* box-shadow: #b5cede 0px 0px 10px; */
		position: absolute;
		bottom: 200rpx;
		left: 20rpx;
		border:10rpx solid #fff;
		background: #fff;
		z-index: 999;
	}
	.legend_item{
		height:50rpx;
		width: 160rpx;
		padding-top: 8rpx;
	}
	.legend_text{
		margin-left: 60rpx;
		margin-top: -34rpx;
		font-size: 24rpx;
		line-height: 34rpx;
	}
	.address{
		width: 46rpx;
		height: 40rpx;
		margin-right: 10rpx;
		line-height: 50rpx;
	}
	.QJ_border{
		width:50rpx;
		height:34rpx;
		background: rgba(0, 122, 255, 0.3);
		border: 2px solid pink;
		line-height: 50rpx;
	}

	.uni-report{
		width: 540rpx;
		height: 80rpx;
		background: linear-gradient(to right, #ee625f, #ae0909);
		border-radius: 80rpx;
		position: absolute;
		left: 100rpx;
		right: 0;
		bottom:100rpx;
		z-index: 999;
	}
	.uni-report-text{
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
	}
	.uni-map-remove1{
		width: 60rpx;
		height: 60rpx;
		border-radius: 20rpx;
		position: absolute;
		top: 130rpx;
		right: 30rpx;
	}
	/* #ifdef H5 */
	#PublicMap{
		width:750rpx;
		height:100%;
	}
	.H5_map{
		width:750rpx;
	}
	/* #endif */

	/* #ifdef APP-PLUS */
	.H5_map{
		width:750rpx;
	}
	/* #endif */

	.map_box{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
	}

</style>
